<template>
  <div class="remote_container">
    <div class='form'>
      <el-form
        :inline="true"
        :model="formInline"
        size='mini'
      >
        <el-form-item label="IP">
          <el-input
            v-model.trim="formInline.ip"
            placeholder="请填写ip"
          ></el-input>
        </el-form-item>
        <el-form-item label="端口">
          <el-input
            v-model.trim="formInline.port"
            placeholder="请填写端口"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model.trim="formInline.username"
            placeholder="请填写用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model.trim="formInline.password"
            placeholder="请填写密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="openSsh"
            :loading="btnLoading"
          >连接</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      id="xterm"
      class="xterm"
    ></div>
  </div>
</template>

<script>
import websocketFeature from '@/util/websocket';
import { Terminal } from 'xterm';
import 'xterm/lib/xterm.js';
import 'xterm/css/xterm.css';
import { FitAddon } from 'xterm-addon-fit';
export default {
  data() {
    return {
      myWebsocketKey: '',
      term: undefined,
      fitAddon: undefined,
      //form参数
      formInline: {},
      btnLoading: false,
    };
  },
  mounted() {
    this.initWebSocket();
    this.openTerminal();
  },
  destroyed() {
    //销毁WebSocket
    if (this.myWebsocketKey && this.myWebsocketKey != '') {
      websocketFeature.remove(this.myWebsocketKey);
    }
  },
  methods: {
    //初始化WebSocket
    initWebSocket() {
      let socketUrl =
        'ws://' +
        window.global_value.VUE_APP_WEBSOCKET_URL +
        '/WebSocketServer/SshWebSocketServer/' +
        new Date().getTime();
      console.log('socketUrl', socketUrl);
      // 建立连接
      this.myWebsocketKey = websocketFeature.create(
        socketUrl,
        this.websocketMessageHandler.bind(this)
      );
    },
    // websocket连接成功，连接ssh
    openSsh() {
      console.log('this.myWebsocketKey', this.myWebsocketKey);
      if (!this.myWebsocketKey) {
        this.$message.error('websocket正在连接，请稍后');
      }
      let order = {
        operate: 'connect',
        host: '172.16.1.172', //IP
        port: '22', //端口号
        username: 'test', //用户名
        password: 'SVR-WQ-dk2022', //密码
      };
      if (this.formInline.ip) {
        order.host = this.formInline.ip;
      }
      if (this.formInline.port) {
        order.port = this.formInline.port;
      }
      if (this.formInline.username) {
        order.username = this.formInline.username;
      }
      if (this.formInline.password) {
        order.password = this.formInline.password;
      }
      this.websocketSendMessage(order);
    },
    // 初始化terminal
    openTerminal() {
      this.term = new Terminal({
        rendererType: 'canvas', //渲染类型
        rows: 35, //行数 18是字体高度,根据需要自己修改
        convertEol: true, //启用时，光标将设置为下一行的开头
        scrollback: 300, //终端中的回滚量
        disableStdin: false, //是否应禁用输入
        cursorStyle: 'underline', //光标样式 'block' | 'underline' | 'bar'
        cursorBlink: true, //光标闪烁
        tabStopWidth: 8, //制表宽度
        screenKeys: true,
        theme: {
          foreground: 'yellow', //字体
          background: '#060101', //背景色
          cursor: 'help', //设置光标
        },
      });

      this.fitAddon = new FitAddon();
      this.term.loadAddon(this.fitAddon);
      this.fitAddon.fit();

      this.term.onData((msg) => {
        //键盘输入时的回调函数
        console.log('msg', msg);
        let order = { operate: 'command', command: msg };
        this.websocketSendMessage(order);
      });
      this.term.open(document.getElementById('xterm'));
      //在页面上显示连接中...
      this.term.write('waiting...');
    },
    // WebSocket 收到消息回调方法
    websocketMessageHandler(e) {
      // console.log(content);
      this.term.write(e['data']);
    },
    // 发送WebSocket消息
    websocketSendMessage(commond) {
      let websocket = websocketFeature.get(this.myWebsocketKey);
      console.log('websocket', websocket);
      websocket.send(JSON.stringify(commond));
    },
  },
};
</script>

<style lang="scss" scoped>
.remote_container {
  height: 100%;
  background-color: 'red';
  .form {
    height: 30px;
    // background-color: green;
  }
  .xterm {
    height: calc(100% - 30px);
  }
}
</style>